<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/hzhlaikan.css">
    <link rel="stylesheet" href="./css/content.css">
    <link rel="stylesheet" href="./font49/iconfont.css">
    <title>Document</title>
</head>

<body>
    <div class="all">
        <div class="nav">
            <div class="wraps">
                <div class="secondnav">
                    <ul>

                    </ul>
                    <div class="morestyle"></div>
                </div>
                <div class="search">
                    <div class="users">
                        <div class="login">
                            <span>用户da955a9b</span>
                            <i></i>
                        </div>
                        <ul>
                            <li>
                                <a href="">我的书架</a>
                            </li>
                            <li>
                                <a href="">充值</a>
                            </li>
                            <li>
                                <a href="">我的磨铁</a>
                            </li>
                            <li>
                                <a href="">消息(<span>0</span>)</a>
                            </li>
                            <li>
                                <a href="">退出</a>
                            </li>
                        </ul>
                    </div>
                    <div class="newread">
                        <a href="">最近阅读</a>
                    </div>
                    <div class="se1">
                        <div class="searchbox">
                            <input class="able1" oninput="newSearch1()" type="text" placeholder="找书" name="" id="">
                            <a href="">
                                <i></i>
                            </a>
                        </div>
                        <ul class="searchLists1">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="header">
            <div class="content">
                <div class="left">
                    <a class="study" href="./wenxue.html">磨铁文学</a>
                    <a href="./hzhlaikan.html" class="curr">来看中文网</a>
                    <a href="./jinwenshouye.html">锦文小说网</a>
                    <a href="./momoMain.html">墨墨言情网</a>
                    <a href="./bookIndex.html">逸云书院</a>
                </div>
                <div class="right">
                    <a href="./login.html">用户da955a9b</a>
                    <a href="./login.html">退出</a>
                    <a href="./login.html">消息(<span>0</span>)</a>
                    <span>手机版</span>
                </div>
            </div>
        </div>
        <div class="back">
            <div class="bg">
                <div class="logo"></div>
                <div class="se">
                    <div class="search">
                        <input class="able" oninput="newSearch()" type="text" placeholder="找书">
                        <div class="btn">
                            <i></i>
                        </div>
                    </div>
                    <ul class="searchLists">
                    </ul>
                </div>
                <div class="fr">
                    <i></i>
                    我的书架
                </div>
            </div>
        </div>
        <div class="firstnav">
            <ul>
                <li class="first"><a href="./hzhlaikan.html">首页</a></li>
                <li><a href="./hzhbook.html">书库</a></li>
                <li><a href="./hzhrank.html">排行</a></li>
                <li><a href="./hzhauthor.html">作家专区</a></li>
                <li><a href="./hzhbenefit.html">福利</a></li>
                <li>
                    <a href="./hzhanime.html">动漫</a>
                    <img src=""
                        alt="">
                </li>
            </ul>
        </div>
        <div class="container">
            <div class="skelet">
                <div class="listTitle">
                    <div class="mod">
                        <h2>本周强推</h2>
                    </div>
                </div>
                <ul class="boxList">
                </ul>
            </div>
            <div class="pic">
                <button class="fir">
                    <p class="iconfont icon-shangyiye"></p>
                </button>
                <img src="https://cdn.motieimg.com/temp/63d979851160e8b0909ed87b63ccadca.jpg" alt="">
                <button class="las">
                    <p class="iconfont icon-xiayiye"></p>
                </button>
                <div></div>

            </div>
        </div>
        <div class="con-two">
            <div class="newSkelet">
                <div class="newTitle">
                    <div class="newmod">
                        <h2>最新动态</h2>
                    </div>
                </div>
                <ul class="newList">
                </ul>
            </div>
            <div class="newpic">
                <div class="newTit">
                    <h2>热门推荐</h2>
                </div>
                <ul class="recommond">
                </ul>
            </div>
        </div>
        <div class="tag">
            <div class="tagBook">
            </div>
            <div class="rank">
                <div class="rankSkelet">
                    <div class="rankTitle">
                        <div class="rankmod">
                            <h2>主编力荐</h2>
                        </div>
                    </div>
                    <ul class="rank1">

                    </ul>
                </div>
            </div>
        </div>
        <div class="bottoms">
            <div class="update">
                <div class="upTitle">
                    <h2>最近更新</h2>
                    <a href="">更多>></a>
                    <ul class="tab">

                    </ul>
                </div>
                <div class="taps">
                    <div class="fixer">
                        <span class="classis">分类</span>
                        <span class="fname">书名</span>
                        <span class="newest">最新章节</span>
                        <span class="author">作者</span>
                        <span class="ftime">更新时间</span>
                    </div>
                    <div class="clears">

                    </div>
                </div>
            </div>
            <div class="bot-right">
                <div class="rig-tit">
                    <div class="tit-bd">
                        <h2>联系客服</h2>
                    </div>
                </div>
                <div class="bd">
                    <p class="bdtext">
                        <span style="font-size: 12px;color: #999;    display: inline-block;
    vertical-align: top;">客服QQ：</span>
                        <span style="font-size: 12px;display: inline-block;
    vertical-align: top;">3469935628</span>
                        <a href=""></a>
                        <br>
                        <span class="tim">周一至周五9:00-18:00</span>

                    </p>
                    <p class="two">
                        <span
                            style="font-size: 12px;color: #999;display: inline-block;vertical-align: top;">客服邮箱：</span>
                        <span style="display:inline-block;vertical-align: top;font-size:12px;">kefu@motie.com</span>
                    </p>
                    <p class="two">
                        <span
                            style="font-size: 12px;color: #999;display: inline-block;vertical-align: top;">客服座机：</span>
                        <span style="display:inline-block;vertical-align: top;font-size:12px;">010-82069306
                            <br>周一至周五9:00-18:00</span>
                    </p>
                    <p class="lc">
                        <a href="">常见问题</a>
                    </p>
                    <div class="editior">
                        <span class="conect">联系编辑：</span>
                        <p class="con-bot">
                            <span>一万字+大纲，请勿一稿多投</span>
                            <i></i>
                        </p>
                        <p class="con-bot">
                            <i></i>
                        </p>
                        <p class="con-bot">
                            <span>【主编】男频长篇/中短篇</span>
                            <i>一线（QQ：992917976）</i>
                        </p>
                        <p class="con-bot">
                            <span>悬疑／泛悬疑／现实/长中短篇</span>
                            <i>糯米（QQ：457941304）</i>
                        </p>
                        <p class="con-bot">
                            <span>【主编】竖屏短剧剧本</span>
                            <i>且歌（QQ：512503820）</i>
                        </p>
                        <p class="con-bot">
                            <span>总编</span>
                            <i>朱侯（QQ：1417675780）</i>
                        </p>
                        <p class="con-bot">
                            <span>网编组长</span>
                            <i>果果（QQ：3219951131）</i>
                        </p>
                    </div>


                </div>
            </div>
        </div>
        <div class="foot">
            <div class="font">
                <a href="">磨铁文学旗下网站：</a>
                <a href="">来看中文网</a>
                <a href="">锦文小说网</a>
                <a href="">墨墨言情网</a>
                <a href="">逸云书院</a>
                <br>
                <a href="">关于我们</a>
                <a href="">联系我们</a>
                <a href="">加入我们</a>
                <a href="">帮助中心</a>
                <a href="">网站地图</a>
            </div>
            <p class="announce">
                Copyright © 2011-2025 LAIKAN.COM All Rights Reserved. 北京来看科技有限公司 版权所有
                <br>
                增值电信业务经营许可证 京B2-20190319 丨 网络出版服务许可证 (署）网出证（京）字第325号 丨
                <a href="">京ICP备17040734号-1</a>
                <br>
                <a href="">网络违法犯罪举报</a>
                <a href="">中国互联网举报中心</a>
                <a href="">网络举报APP下载</a>
                <br>
            </p>
            <div class="blank">
                <a href="">
                    <img src="https://pic.motieimg.com/web-pc-my3/dist/static/img/guohui.d0289dc.png" alt="">
                    <p>京公网安备 11010202009584号</p>
                </a>
            </div>
        </div>
        <div class="sideMenu">
            <ul>
                <li>
                    <a class="con fle" href="">
                        <i class="f1"></i>
                        <span class="rea read"></span>
                    </a>
                </li>
                <li>
                    <a class="con fle1" href="">
                        <i class="f2"></i>
                        <span class="rea read1"></span>
                    </a>
                </li>
                <li>
                    <a class="con fle2" href="">
                        <i class="f3"></i>
                        <span class="rea read2"></span>
                    </a>
                </li>
            </ul>
            <div class="totop"></div>
        </div>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const newSearch = () => {
        const input = document.querySelector('.able')
        const searchLists = document.querySelector('.searchLists')
        if (input.value == '') {
            searchLists.innerHTML = ''
        } else {
            axios.get(`https://app2.motie.com/search?objectType=2&word=${input.value}&pageSize=2`).then(res => {
                let datelist = ''
                searchLists.innerHTML = ''
                res.data.data.bookList.forEach((date1, everys) => {
                    datelist += `
                    <li class="line">
                        <a href="">
                            <img src="${date1.icon}"
                                alt="" class="imgbox">
                            <div class="details">
                                <p class="de-name">${date1.name}</p>
                                <p class="de-author">${date1.authorName}</p>
                            </div>
                        </a>
                    </li>
                `
                })
                searchLists.innerHTML = `
                <li>
                    <a class="about" href="">
                        <i></i> 搜“
                        <span>${input.value}</span>
                        ”相关作品>>
                    </a>
                </li>
                ${datelist}      
            `
            }).catch(err => {
                console.log(err)
            })
        }
    }
    const newSearch1 = () => {
        const input1 = document.querySelector('.able1')
        const searchLists1 = document.querySelector('.searchLists1')
        if (input1.value == '') {
            searchLists1.innerHTML = ''
        } else {
            axios.get(`https://app2.motie.com/search?objectType=2&word=${input1.value}&pageSize=2`).then(res => {
                let datelist1 = ''
                searchLists1.innerHTML = ''
                res.data.data.bookList.forEach((date1, everys) => {
                    datelist1 += `
                    <li class="line">
                        <a href="">
                            <img src="${date1.icon}"
                                alt="" class="imgbox">
                            <div class="details">
                                <p class="de-name">${date1.name}</p>
                                <p class="de-author">${date1.authorName}</p>
                            </div>
                        </a>
                    </li>
                `
                })
                searchLists1.innerHTML = `
                <li>
                    <a class="about" href="">
                        <i></i> 搜“
                        <span>${input1.value}</span>
                        ”相关作品>>
                    </a>
                </li>
                ${datelist1}      
            `
            }).catch(err => {
                console.log(err)
            })
        }
    }
    document.addEventListener('click', (event) => {
        const searchLists = document.querySelector('.searchLists');
        const searchContainer = document.querySelector('.se .search'); // 搜索框容器

        // 判断点击位置是否在搜索框或搜索结果内
        const isClickInsideSearch = searchContainer.contains(event.target) ||
            searchLists.contains(event.target);

        // 如果点击在外部且有搜索结果，则隐藏结果
        if (!isClickInsideSearch && searchLists.innerHTML.trim() !== '') {
            searchLists.innerHTML = ''; // 只清空搜索结果，保留输入框内容
        }
    });
    const totop = document.querySelector(".totop")
    totop.addEventListener('click', () => {
        // 平滑滚动到顶部（behavior: 'smooth' 实现平滑效果）
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    axios.get('https://app2.motie.com/pc/home?type=1').then(res => {
        const templateList = res.data.data.strongPush.templateList
        const boxList = document.querySelector('.boxList')
        templateList.forEach(item => {
            boxList.innerHTML += `
                <li onclick="jumps(${item.id}); return false;">
                    <a href="">
                        <span>「${item.content}」</span>${item.name}
                    </a>
                </li>
            `
        })
        const newTem = res.data.data.newRecent.templateList
        const newList = document.querySelector('.newList')
        newTem.forEach(item1 => {
            newList.innerHTML += `
                <li>
                    <span>·</span>
                    <a href="">
                        ${item1.name}
                    </a>
                </li>
            `
        })
        const recommond = document.querySelector('.recommond')
        const hot = res.data.data.hotRecommend.templateList
        hot.forEach(item2 => {
            recommond.innerHTML += `
                <li>
                    <a onclick="jumps(${item2.id}); return false;" class="reco-pic" href="">
                        <img src="${item2.imgUrl}" alt="">
                    </a>
                    <div class="bott">
                        <a class="bott-tit" href="">${item2.name}</a>
                        <a class="bott-name" href="">${item2.authorName}</a>
                    </div>
                </li>
            `
        })
        const tagBook = document.querySelector('.tagBook')
        for (let i = 1; i <= 4; i++) {
            const re = 'recommend' + i
            const recommend = res.data.data[re]
            tagBook.innerHTML += `
                <div class="book">
                    <div class="titmenu">${recommend.shelfName}</div>
                    <div class="bl">
                        <div class="photo">
                            <a onclick="jumps(${recommend.templateList[0].id}); return false;" href="">
                                <img src="${recommend.templateList[0].imgUrl}" alt="">
                            </a>
                        </div>
                        <div class="bl-right">
                            <a onclick="jumps(${templateList[0].id}); return false;" href="">${recommend.templateList[0].name}</a>
                            <span class="info">${recommend.templateList[0].content}</span>
                            <div class="bok">
                                <p>作者：</p>
                                <a href="">${recommend.templateList[0].authorName}</a>
                            </div>

                        </div>
                    </div>
                </div>
                
            `
        }
        const rank1 = document.querySelector('.rank1')
        const editor = res.data.data.editorRecommend.templateList
        editor.forEach((item2, index) => {
            rank1.innerHTML += `
                ${index < 3 ? index == 0 ? `<li>
                    <span class="ran firs">${index + 1}</span>
                    <div>
                        <a onclick="jumps(${item2.id}); return false;"  class="akang" href=""><img class="kang" src="${item2.imgUrl}" alt=""></a>
                        <a class=newName href="">${item2.name}</a>
                    </div>
                    
                </li>`: `<li>
                    <span class="ran">${index + 1}</span>
                    <a onclick="jumps(${item2.id}); return false;"  class=aname href="">${item2.name}</a>
                </li>`: `<li>
                    <span>${index + 1}</span>
                    <a onclick="jumps(${item2.id}); return false;"  class=aname href="">${item2.name}</a>
                </li>`}
                
            `
        })
    }).catch(err => {
        console.log(err)
    })
    function resets() {
        const tab1 = document.querySelectorAll('.tab li')
        tab1.forEach(tt => {
            tt.style.border = '';
            tt.style.color = '';
            tt.style.fontSize = '';
        })
    }
    const list1 = ['全部', '免费', 'VIP']
    const tabs = document.querySelector('.tab')
    list1.forEach((item4, index4) => {
        tabs.innerHTML += `
            <li onmouseover="tabes(this,${index4})">${item4}</li>
        `
    })
    const tabes = (t, x) => {
        resets()
        t.style.border = '1px solid #ff4c2f';
        t.style.color = '#ff4c2f';
        t.style.fontSize = '16px';
        axios.get(`https://app2.motie.com/pc/recentUpdates?siteType=1&type=${x}`).then(res => {
            const clears = document.querySelector('.clears')
            clears.innerHTML = ''
            res.data.data.forEach(item3 => {
                const date = new Date(item3.lastUpdateTime);
                const year = date.getFullYear();
                const month = date.getMonth() + 1; // 月份从0开始，需+1
                const day = date.getDate();
                const hours = date.getHours();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();
                // 补零函数：小于10的数字前加0
                const padZero = (num) => num < 10 ? '0' + num : num;
                // 格式化时间
                const newDate = `${year}-${padZero(month)}-${padZero(day)} ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
                clears.innerHTML += `
                <a class="classis cl" href="">${item3.sort}</a>
                <a onclick="jumps(${item3.id}); return false;" class="fname cl co" href="">${item3.bookName}</a>
                <a href="" class="newest cl">${item3.chapterName}</a>
                <a class="author cl" href="">${item3.authorName}</a>
                <a class="ftime cl" href="">${newDate}</a>
            `
            })
        }).catch(err => {
            console.log(err)
        })
    }
    window.addEventListener('DOMContentLoaded', () => {
        // 获取第一个li元素
        const firstLi = tabs.querySelector('li:first-child');
        // 如果第一个li存在，触发它的mouseover事件
        if (firstLi) {
            // 触发事件，会自动调用tabes(this, 0)
            firstLi.dispatchEvent(new MouseEvent('mouseover'));
        }
    });

    axios.get(`https://app2.motie.com/pc/float?type=1`).then(res => {
        const second = document.querySelector('.secondnav ul')

        let a = ''
        res.data.data.forEach((item5, index5) => {
            a += `
                <li>
                    ${index5 < 4 ? `<a href="${item5.url}">${item5.name}</a>` : index5 == 4 ?
                    '<a onmouseover="mour()" onmouseout="leave()" class="more" href="${item5.url}">更多</a>'
                    : ''}
                </li>
                
            `
        })
        second.innerHTML = `
            <li>
                <a class="lai" href="">来看中文网</a>    
            </li>
            ${a}
        `
        const morestyle = document.querySelector('.morestyle')
        window.mour = () => {
            console.log(event.target.parentNode)
            event.target.parentNode.classList.add('mostd')
            event.target.parentNode.style.backgroundColor = '#4c4c4c'
            event.target.classList.add('active')
            morestyle.innerHTML = ''
            res.data.data.forEach((item6, index6) => {
                if (index6 >= 4) {
                    morestyle.innerHTML += `
                    <a href="${item6.url}">${item6.name}</a>
                `

                }


            })
        }
        window.leave = () => {
            event.target.parentNode.classList.remove('mostd')
            event.target.parentNode.style.backgroundColor = ''
            event.target.classList.remove('active')
            morestyle.innerHTML = ''

        }

    }).catch(err => {
        console.log(err)
    })
    const nav = document.querySelector('.nav')
    const triggerScrollPos = 300;
    window.addEventListener('scroll', function () {
        // 获取当前滚动的垂直距离
        const currentScrollPos = window.scrollY;

        // 判断滚动位置并添加/移除显示类
        if (currentScrollPos > triggerScrollPos) {
            nav.classList.add('show');
        } else {
            nav.classList.remove('show');
        }
    });
    window.addEventListener('scroll', function () {
        // 获取当前滚动的垂直距离
        const currentScrollPos = window.scrollY;

        // 判断滚动位置并添加/移除显示类
        if (currentScrollPos > triggerScrollPos) {
            totop.style.display = 'block'
        } else {
            totop.style.display = 'none'
        }
    });

</script>
<script>
    function jumps(id){
        if(localStorage.getItem('account')||sessionStorage.getItem('account')){
            window.location.href=`./laikan-bookDetail.html?id=${id}`
        }else{
            window.location.href='./login.html'
        }
        
    }
</script>

</html>